<script setup lang="ts">
import type { FormInstance } from 'element-plus';

import { computed, ref, watch } from 'vue';

import { useOrderStore } from '#/store/order';

const props = defineProps<{
  changeDisabledName: string;
  disabledName: string;
  modelValue: any;
  optionsBuySell: { label: string; type: string; value: string }[];
}>();

// 定义 emits 来触发 update:modelValue 事件
const emits = defineEmits(['update:modelValue']);

const orderStore = useOrderStore();

const formData = ref(props.modelValue);

const optionChange = (val: any) => {
  const belongs = Array.isArray(val)
    ? val.map((item) => item.belong)
    : [val.belong];

  orderStore.setDisabled(props.changeDisabledName, belongs);
};

watch(
  formData,
  (newValue) => {
    // 当 formData 变化时，触发 update:modelValue 事件，将新值传递给父组件
    emits('update:modelValue', newValue);
  },
  { deep: true },
);

watch(
  () => formData.value.level,
  (val) => {
    if (val === 'MKT') {
      formData.value.amount = null;
    }
  },
);

const openRules = ref({
  leverage: [{ required: true, message: '请输入杠杆', trigger: 'blur' }],
  price: [{ required: true, message: '请输入价格' }],
  amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
  quantity: [{ required: true, message: '请输入数量', trigger: 'blur' }],
  level: [{ required: true, message: '请选择' }],
  place_delay: [{ required: true, message: '请输入延迟时间' }],
  cancel_delay: [{ required: true, message: '请输入撤单时间' }],
});

const placeBuyFormRef = ref<FormInstance>();

const validate = async () => {
  if (!placeBuyFormRef.value) return false;
  return placeBuyFormRef.value.validate();
};

const color = computed(() => {
  const option = props.optionsBuySell.find(
    (v) => v.value === formData.value.level,
  );
  if (option?.type === 'buy') {
    return '#35cd8f';
  }
  if (option?.type === 'mkt') {
    return '#3f51b5';
  }
  if (option?.type === 'sell') {
    return '#ff8080';
  }
  return '#a8abb2';
});

defineExpose({ validate });
</script>

<template>
  <div class="buy" :style="{ '--color': color }">
    <el-form
      class="form"
      :model="formData"
      :rules="openRules"
      ref="placeBuyFormRef"
      label-width="100px"
    >
      <el-form-item label="杠杆" prop="leverage">
        <el-input-number
          v-model="formData.leverage"
          placeholder=""
          style="width: 100%"
          type="number"
          :controls="false"
          :min="1"
          :max="500"
          :precision="0"
          class="inp"
        />
      </el-form-item>
      <el-form-item
        label="数量"
        :prop="formData.amount ? '' : 'quantity'"
        :key="formData.amount"
      >
        <el-input-number
          v-model="formData.quantity"
          style="width: 100%"
          placeholder=""
          type="number"
          :controls="false"
          :min="0.00000001"
          :precision="8"
          class="inp"
          :disabled="!!formData.amount"
        />
      </el-form-item>
      <el-form-item
        label="金额"
        :prop="formData.quantity ? '' : 'amount'"
        :key="formData.quantity"
      >
        <el-input-number
          v-model="formData.amount"
          placeholder=""
          style="width: 100%"
          type="number"
          :controls="false"
          :min="0.00000001"
          :precision="8"
          class="inp"
          :disabled="!!formData.quantity || formData.level === 'MKT'"
        />
      </el-form-item>
      <el-form-item
        label="档位"
        :prop="formData.price ? '' : 'level'"
        :key="formData.price"
      >
        <el-select
          v-model="formData.level"
          placeholder=""
          popper-class="buy-select"
          class="select-price"
          style="width: 100%"
          clearable
          :disabled="!!formData.price"
        >
          <el-option
            v-for="item in props.optionsBuySell"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            :class="
              item.type === 'buy'
                ? 'buy-option'
                : item.type === 'mkt'
                  ? 'mkt-option'
                  : 'sell-option'
            "
          />
        </el-select>
      </el-form-item>
      <el-form-item
        label="价格"
        :prop="formData.level ? '' : 'price'"
        :key="formData.level"
      >
        <el-input-number
          v-model="formData.price"
          placeholder=""
          style="width: 100%"
          type="number"
          :controls="false"
          :min="0.00000001"
          :precision="8"
          class="inp"
          :disabled="!!formData.level"
        />
      </el-form-item>
      <el-form-item label="买组" prop="group">
        <el-select
          v-model="formData.group"
          @change="optionChange"
          placeholder=""
          value-key="name"
          multiple
          collapse-tags
          :max-collapse-tags="2"
          style="width: 100%"
          :disabled="formData.account.length > 0"
        >
          <el-option
            v-for="item in orderStore.groups"
            :key="item"
            :label="item.name"
            :value="item"
            :disabled="item[disabledName]"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="买户" prop="account">
        <el-select
          v-model="formData.account"
          @change="optionChange"
          placeholder=""
          value-key="id"
          multiple
          collapse-tags
          style="width: 100%"
          :disabled="formData.group.length > 0"
        >
          <el-option
            v-for="item in orderStore.users.filter((item) => item.status)"
            :key="item.name"
            :label="item.account"
            :value="item"
            :disabled="item[disabledName]"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="延迟时间" prop="place_delay">
        <el-input-number
          v-model="formData.place_delay"
          class="numInput"
          placeholder=""
          style="width: 100%"
          type="number"
          :controls="false"
          :min="0"
          :precision="0"
          onkeypress="return( /[\d.]/.test(String.fromCharCode(event.keyCode)))"
        >
          <template #suffix>
            <span>毫秒</span>
          </template>
        </el-input-number>
      </el-form-item>
      <el-form-item label="自动撤单">
        <el-radio-group v-model="formData.isAutoRevoke">
          <el-radio :value="true">是</el-radio>
          <el-radio :value="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="撤单时间" prop="cancel_delay">
        <el-input-number
          v-model="formData.cancel_delay"
          class="numInput"
          placeholder=""
          style="width: 100%"
          type="number"
          :controls="false"
          :min="0"
          :precision="0"
          onkeypress="return( /[\d.]/.test(String.fromCharCode(event.keyCode)))"
          :disabled="!formData.isAutoRevoke"
        >
          <template #suffix>
            <span>秒</span>
          </template>
        </el-input-number>
      </el-form-item>
    </el-form>
  </div>
</template>
<style>
.buy {
  .el-input {
    --el-input-width: 260px;
  }

  .el-select {
    --el-select-width: 260px;
  }
}
</style>
<style scoped lang="scss">
.select-price {
  ::v-deep(.el-select__selection) {
    text-align: center;

    .el-select__placeholder {
      color: var(--color);
    }
  }
}

.buy-select {
  .buy-option {
    color: #35cd8f;
  }

  .sell-option {
    color: #ff8080;
  }

  .mkt-option {
    color: #3f51b5;
  }
}
</style>
